<template>
  <section id="search_page">
  		<ma-header titleName="更多服务"></ma-header>
      <ma-scroll :down="true" :getMore="getList"  :showMsg="false" :init="init">
        <!-- 动态 -->
        <div class="searchTitle" v-if="spaceList.length !== 0">
          <h4 >动态</h4>
        </div>
        
        <div v-for="(obj,index) in spaceList" :key="index">
          <dynamic @deleteItem="deleteItem" :index="index" :obj="obj" ></dynamic>
        </div>

        <!-- 话题 -->
        <div v-if="topicList.length !== 0" class="searchTitle" v-tap="{methods:goSearchInfo,type:'topic'}">
          <h4>话题</h4>
        </div>
        
        <div v-for="(obj,index) in topicList" :key="index" v-if="index<3">
          <dynamic @deleteItem="deleteItem" :index="index" :obj="obj" ></dynamic>
        </div>

        <!-- 活动 -->
        <div class="searchTitle" v-if="activityList.length !== 0">
          <h4 >活动</h4>
        </div>
        
        <div v-if="activityList.length !== 0">
          <active-item v-for="(item, index) in activityList" 
                      :key="index" 
                      v-tap="{methods: checkDetail, activeId: item.id, status: item.isbaoming, shopName: item.shop&&item.shop.name}" 
                      :item="item">
          </active-item>
        </div>
      </ma-scroll>
    
  </section>
</template>
<script>
import dynamic from "components/dynamic/dynamic_home";
import ListPostByKeyword from "services/community/ListPostByKeyword";
import maHeader from "components/magicHeader"
import empty from "components/empty-page";
import activeItem from 'components/activeItem'
//import scroll from "components/scroll/scroll"
export default {
  name: "search_page",
  components: {
    dynamic,
    maHeader,
    empty,
    activeItem
//  scroll
  },
  data() {
    return {
      spaceList: [],
      topicList:[],
      activityList:[],
      init: false,
      index: 0,
	  count: 10,
      keyword : '',
      type:''
    };
  },
  mounted() {
    let vm =this
    this.keyword = this.$route.params.keyword
    this.type = this.$route.params.type

      ListPostByKeyword.bind(this)(
          {
            index: vm.index + "",
			count: vm.count + "",
            type:this.type,
            keyword:this.keyword
          },
          res => {
            vm.spaceList.push(...res.spaceList);
            vm.activityList.push(...res.activityList);
            vm.topicList.push(...res.topicList);
            console.log(vm.activityList)
            vm.index += vm.count;
            vm.init = true;
          }
        );
  },
  computed:{
    emptyMessage(){
      let str = ''
      if(this.type === 'activity'){
        str = '没有搜索到相应活动'
      }else if(this.type === 'topic'){
        str = '没有搜索到相应话题'
      }else{
        str = '没有搜索到相应动态'
      }
      return str
    }
  },
  methods: {
     // 查看活动详情
    checkDetail(params) {
      this.$router.push({
        name: "activity_list_detail",
        query: {
          activeId: params.activeId,
          status: params.status,
          shopName: params.shopName
        }
      });
    },
    getList(callback) {
      let vm = this;
         return new Promise(function(resolve, reject) {
        ListPostByKeyword.bind(vm)(
          {
            index: vm.index + "",
            count: vm.count + "",
            type:this.type,
            keyword:this.keyword
          },
          res => {
            vm.spaceList.push(...res.spaceList);
            vm.activityList.push(...res.activityList);
            vm.index += vm.count;
               vm.init = true;
               resolve(callback);
          }
        );
         });
    },
    deleteItem(index){
        this.searchArr.splice(index,1)
    },
    pubDynamic(){
        this.$router.push({
            name:'pub_dynamic'
        })
    }
  }
};
</script>
<style lang="scss">
#search_page {
  .searchTitle{
    height: 30px;
    padding-left: 10px;
    border-bottom: 1px solid #ececec;
    margin-top: 5px;
    h4{
      font-size: 16px;
      font-weight: normal;
      line-height: 30px;
    }
  }
  .scroller{
    width: 100%;
  }
    #wrapper{
        top: 50px;
    }
   .fleetName{
     background-color: #f8f8f8;
   } 
   .main{
     background-color: #f8f8f8;
   }
   .bottom{
     background-color: #f8f8f8;
   }
   
}
</style>


